<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>K5G-C</title>
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/index.css" />
</head>
<body>
  <div class="main">
    <div class="tit-heade">
        <div class="itemOne">
            <img src="./image/left.png" >
        </div>
        <div class="itemTwo">
            <div class="item-chil">
                <img src="./image/logoutOne.png">
            </div>
            <div class="item-chil">
                <a href="/action/logout">ログアウト</a>
            </div>
            
        </div>
    </div>  
      <div class="nav2">
        <div class="nav-item">
            <div id='x1' class="item " onclick="toPage('./home.html')">ホーム</div>
        </div>
        <div class="nav-item">
            <div id='x2' class="item no-act" onclick="toPage('./mobileData.html')">モバイルネットワーク</div>
        </div>
          <div class="nav-item">
              <div id='x3' class="item no-act" onclick="toPage('./wifi.html')">Wi-Fi設定</div>
              <div class="hide">
                  <div>
                      <div id='x31' class="item1 no-act">wifi</div>
                      <div class="hide">
                          <div class="item2" id="wifi1" onclick="toPage('./wifi.html')">Wi-Fi</div>
                          <div class="item2" id="wifi2" onclick="toPage('./wifiList.html')">Wi-Fi 接続情報</div>
                          <div class="item2" id="wifi_list" onclick="toPage('./wifiManage.html')">接続デバイスの管理</div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="nav-item">
              <div id='x4' class="item no-act" onclick="toPage('./dhcp.html')">Ethernet設定</div>
              <div class="hide">
                  <div>
                      <div id='x41' class="item1 no-act">DHCP固定割当設定</div>
                      <div class="">
                          <div class="item2" id="DHCP">DHCP固定割当設定</div>
                          <div class="item2" id="MAC">MAC IP Bindingリスト</div>
                      </div>
                  </div>
              </div>
          </div>
          <div class="nav-item">
              <div id='x5' class="item no-act" onclick="toPage('./port.html')">LAN設定</div>
              <div class="">
                  <div>
                      <div id='x51' class="item1 no-act">ポートフォワーディング</div>
                      <div class="">
                          <div class="item2 " id="port" onclick="toPage('./port.html')">ポートフォワーディング</div>
                          <div class="item2 choose" id="port_list" onclick="toPage('./portList.html')">ポートフォワーディングリスト</div>
                      </div>
                  </div>
                  <div>
                      <div id='x52' class="item1 no-act" onclick="toPage('./ipFiltering.html')">IPパケットフィルタリング</div>
                      <div class="hide">
                          <div class="item2" id="IP">IPパケットフィルタリング</div>
                          <div class="item2" id="IP_list">IPパケットフィルタリングリスト</div>
                      </div>
                  </div>
                  <div>
                      <div id='x54' class="item1 no-act" onclick="toPage('./ipv6Filtering.html')">IPv6パケットフィルタリング</div>
                      <div class="hide">
                          <div class="item2" id="IPV6">IPv6パケットフィルタリング</div>
                          <div class="item2" id="IPV6_list">IPv6パケットフィルタリングリスト</div>
                      </div>
                  </div>
                  <div>
                      <div id='x55' class="item1"
                           onclick="toPage('./wan.html')">
                          WANポートPingブロック
                      </div>
                  </div>
                  <div>
                      <div id='x53' class="item1"
                           onclick="toPage('./dmz.html')">
                          DMZ
                      </div>
                  </div>
              </div>
          </div>
          <div class="nav-itm">
              <div id='x6' class="item no-act" onclick="toPage('./password.html')">端末設定</div>
              <div class="hide">
                  <div>
                      <div class="">
                          <div class="item" onclick="toPage('./password.html')">パスワード設定</div>
                          <div class="item" onclick="toPage('./dataUsage.html')">データ使用量</div>
                          <div class="item" onclick="toPage('./reboot.html')">リブート</div>
                          <div class="item" onclick="toPage('./deviceInformation.html')">デバイス情報</div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    <div class="content">
        <div class="title">ポートフォワーディングリスト</div>
        <div style="margin-left: 100px;margin-top: 10px;">
            <p>ポートフォワーディングで追加された設定が表示されます。</p>
            <p>リストには最大で128の設定が追加できます。</p>
        </div>
      <div class="port-list" style="padding: 0 5%">
        <table class="default-table" id="port-table">
          <thead>
            <tr>
              <th width="20%">外部ポート番号</th>
              <th width="20%">LAN側IPアドレス</th>
              <th width="20%">内部ポート番号</th>
              <th width="20%">プロトコル</th>
              <th width="20%"></th>
            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <script src="./js/utils.js"></script>
  <script>
    window.onload = function () {
        getData()
        testAction()
        getSimNum()
    }

    function getSimNum() {
        var num = sessionStorage.getItem('activeSimNumber')
        if (num == 0) {
            var btn = document.getElementById('x2')
            btn.onclick = function() {}
            btn.style.backgroundColor = '#eee'
        }
        var params = {}
        Ajax.post(baseUrl + '/action/getActiveSimCardNumber', JSON.stringify(params), function(res) {
            var response = JSON.parse(res)
            if (response.status == 'success') {
                sessionStorage.setItem('activeSimNumber', response.data.activeSimNumber)
            }
        })
    }
    function getData() {
        Ajax.get(baseUrl + '/action/portList',function(res) {
            var response = JSON.parse(res)
            if(response.status == 'success') {
                var data = response.data
                var box = document.getElementById("port-table").children[1]
                for(var i = 0 ; i< data.length; i++) {
                    var item = data[i]
                    var tr = document.createElement('tr')
                    tr.innerHTML = `<td>${item.outside_port_no}</td>
                    <td>${item.inner_ip}</td>
                    <td>${item.inner_port_no}</td>
                    <td>${item.protocol}</td>
                    <td><div class="default-btn" onclick="portDelete('${item.id}')">削除</div></td>`
                    box.appendChild(tr)
                }
            } else {
                Message.info('処理に失敗しました')
            }
        })
    }
    function portDelete(id) {
        Ajax.post(baseUrl + '/action/portDelete',JSON.stringify({
            id: id
        }),function(res) {
            var response = JSON.parse(res)
            if(response.status == 'success') {
                setTimeout(function() {
                    window.location.reload()
                }, 1000);
                Message.info("設定を削除しました")
            } else {
                Message.info('処理に失敗しました')
            }
        })
    }
  </script>
</body>
</html>
